<template>
  <el-dialog
    title="向量检索"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70%">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="searchSubmit()" label-width="80px">
      <el-form-item label="检索内容" prop="query">
        <el-input v-model="dataForm.query" placeholder="请输入检索内容"></el-input>
      </el-form-item>
      <el-form-item label="结果数量" prop="limit">
        <el-slider v-model="dataForm.limit" :min="5" :max="50" :step="5" show-stops></el-slider>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchSubmit()">检索</el-button>
      </el-form-item>
    </el-form>
    
    <div v-loading="dataListLoading">
      <div v-if="searchResults.length > 0">
        <h3>检索结果：</h3>
        <el-card v-for="(item, index) in searchResults" :key="index" class="result-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>{{ item.title }}</span>
          </div>
          <div class="content">
            <p>{{ item.content }}</p>
          </div>
        </el-card>
      </div>
      <div v-else-if="hasSearched" class="no-result">
        <el-empty description="暂无检索结果"></el-empty>
      </div>
    </div>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          query: '',
          limit: 10
        },
        searchResults: [],
        dataListLoading: false,
        hasSearched: false
      }
    },
    methods: {
      init () {
        this.visible = true
        this.dataForm.query = ''
        this.searchResults = []
        this.hasSearched = false
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
      },
      // 执行检索
      searchSubmit () {
        if (!this.dataForm.query) {
          this.$message.warning('请输入检索内容')
          return
        }
        
        this.dataListLoading = true
        this.hasSearched = true
        
        this.$http({
          url: this.$http.adornUrl('/doc/vector/search'),
          method: 'get',
          params: this.$http.adornParams({
            'query': this.dataForm.query,
            'limit': this.dataForm.limit
          })
        }).then(({data}) => {
          this.dataListLoading = false
          if (data && data.code === 0) {
            this.searchResults = data.list || []
            if (this.searchResults.length === 0) {
              this.$message.info('未找到相关内容')
            }
          } else {
            this.searchResults = []
            this.$message.error(data.msg || '检索失败')
          }
        }).catch(() => {
          this.dataListLoading = false
          this.searchResults = []
        })
      }
    }
  }
</script>

<style scoped>
.result-card {
  margin-bottom: 15px;
}
.content {
  text-align: left;
  color: #606266;
}
.no-result {
  margin: 30px 0;
}
</style>
